<template>
	<view class="pages-index" :class="{'active':noScroll}">
		<!-- 顶部滚动文字 -->
		<view class="top-tips ">
			<view class="top-tips-text">望天，我平台拒绝向未成年人提供服务。</view>
		</view>

		<!-- 头部内容，包含icon和旋转的圆盘 -->
		<view class="top">
			<image src="https://ydh5res.onlineweixin.com/cy2/index_files/top-b.png" mode="widthFix" alt=""
				class="topBg"></image>
			<image src="https://ydh5res.onlineweixin.com/cy2/index_files/round3.png" mode="widthFix" alt=""
				class="round"></image>
			<image src="https://ydh5res.onlineweixin.com/cy2/index_files/icon3.png" mode="widthFix" alt=""
				class="icon1"></image>
			<image src="https://ydh5res.onlineweixin.com/cy2/index_files/icon2.png" mode="widthFix" alt=""
				class="icon2"></image>
			<image src="https://ydh5res.onlineweixin.com/cy2/index_files/icon1.png" mode="widthFix" alt=""
				class="icon3"></image>
		</view>
		<view class="birth" :class="{'active':formInfo.needExtraServe === 1}"
			:style="{'height': showAsk ?'1220rpx' : '880rpx'}" ref="birth">
			<!-- 姓名、性别、生日表单背景图 -->
			<image v-if="!showAsk"
				src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/index_files/01%402x2s-a.png?v=3221" alt=""
				class="bg bg1" mode="widthFix"></image>
			<!-- 姓名、性别、生日、困惑背景图 -->
			<image v-if="showAsk"
				src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/index_files/form_bg0816.png?v=3221" alt=""
				class="bg bg1" mode="widthFix"></image>
			<!-- 轮播部分 -->
			<view class="swiper-box">
				<view>
					<swiper class="swiper" circular :vertical="true" :indicator-dots="false" :autoplay="true"
						:interval="2000" :duration="500" :disable-touch="true">
						<swiper-item v-for="(item,index) in userArr">
							<view class="flex align-center padding-tb-xs">
								<view class="img">
									<image mode="widthFix" :src="item.img"></image>
								</view>
								<view>
									<view class="text-sm margin-bottom-xs">{{ item.name }}</view>
									<view class="text-sm">{{ item.timer }}分钟前测试 打
										{{ item.fenshu }} 分好评
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="total-num">
					<view> 已有 {{ totalNum }} 人</view>
					<view>领取建议报告</view>
				</view>
			</view>
			<!-- 姓名 -->
			<view class="form-name">
				<input type="text" class="input" placeholder="请输入您的姓名(必须汉字)" v-model="formInfo.name"
					placeholder-style="color:#81b3ff" @blur="whereInput" @focus="handleNameFocus" />
			</view>
			<!-- 性别 -->
			<view class="form-sex flex align-center justify-around">
				<view class="sex-item" :class="{'active':formInfo.sex === 1}" @click="formInfo.sex = 1">
					<image src="https://ydh5res.onlineweixin.com/cy/index_files/sexImg.png?v=123" mode="widthFix">
					</image>
					<text>男</text>
				</view>
				<view class="sex-item" :class="{'active':formInfo.sex === 0}" @click="formInfo.sex = 0">
					<image src="https://ydh5res.onlineweixin.com/cy/index_files/sexImg2.png?v=123" mode="widthFix">
					</image>
					<text>女</text>
				</view>
			</view>
			<!-- 选择出生日期 -->
			<view class="form-birthday" @click="openBetterCalendar">
				<input type="text" readonly class="input" placeholder="请选择您的出生日期" v-model="formInfo.birthdayText"
					placeholder-style="color:#81b3ff" disabled />
			</view>

			<!-- 困惑 -->
			<view class="form-ask" v-if="showAsk">
				<textarea class="textarea" placeholder="输入当下的现状和困惑，请一次描述清楚" v-model="formInfo.kunHuo"
					placeholder-style="color:#81b3ff" maxlength="-1"></textarea>
			</view>
			<!-- 提示语 -->
			<view class="tips" style="bottom: 80rpx;" v-if="showAsk">
				本系统接入了最新Ai大数据，根据您的信息匹配最佳人生建议！Ai虽强大但不是全能。看完结果后，希望能给您带来心灵净化，仅供娱乐，如有疑问联系客服。
			</view>
			<view class="tips" style="bottom: 60rpx;" v-if="!showAsk">
				本系统接入了最新Ai大数据，根据您的信息匹配最佳人生建议！Ai虽强大但不是全能。看完结果后，希望能给您带来心灵净化，仅供娱乐，如有疑问联系客服。
			</view>
		</view>
		<!-- 立即解惑 -->
		<view class="btn" @click="toProp">
			<image src="https://ydh5res.onlineweixin.com/cy2/index_files/btn@2x.png?v=2" alt="" class="indexBtn">
			</image>
		</view>
		<view class="desc" @click="toTop">
			<!-- 人生两大困惑 -->
			<image class="desc-img"
				src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/index_files/liangdakunhuo.png?v=101" alt=""
				mode="widthFix"></image>
			<!-- 为你解读的专属报告 -->
			<image class="desc-img" src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/index_files/baogao-a.jpg"
				v-if="version === 'A1'" alt="" mode="widthFix"></image>
			<!-- 具体建议分析 -->
			<image class="desc-img" src="https://ydh5res.onlineweixin.com/cy2/index_files/three@1m.png?v=100" alt=""
				mode="widthFix"></image>
			<!-- 适合你放松或助眠的专属轻音乐 -->
			<image class="desc-img" src="https://ydh5res.onlineweixin.com/cy2/index_files/four@1m.png?v=100" alt=""
				mode="widthFix"></image>
		</view>
		<!-- 底部立即解惑按钮 -->
		<view style="height: 140rpx;">
			<view class="scrollBtn" v-if="footerShow" @click="toTop">
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/btn@2x.png" alt=""></image>
			</view>
		</view>
		<dLoading :status="loading" v-if="!loginSuccessed"></dLoading>
		<rui-datepicker-w ref="ruiDatepicker" @confirm="dateConfirm" @cancel="dateCancel"
			v-if="showCalendar"></rui-datepicker-w>
		<!-- 页面右侧订单查询和售后客服 -->
		<view class="right-btn flex align-center justify-between flex-direction" v-if="loginSuccessed">
			<view @click="toPage('/pages/orderList/orderList')">
				<image src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/bzinfo_files/chaxun.png" mode="widthFix"
					alt=""></image>
				<view>
					订单查询
				</view>
			</view>
			<view style="width: 30rpx;border-bottom: 2rpx solid #fff;margin: 15rpx 0;"></view>
			<view @click="toPage('/pages/msg/index')">
				<image src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/bzinfo_files/zhuyi.png" mode="widthFix"
					alt=""></image>
				<view>
					售后客服
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from "dayjs";
	import {
		alitaskAuth,
		dytaskAuth,
		getShowAsk,
		getType,
		submitInfo,
		submitInfoH5
	} from "../../api";
	import {
		userList
	} from "../../tools/const";
	import {
		confirm,
		toast,
		toPage
	} from "../../tools";
	import {
		APPID
	} from "../../config";
	import {
		calendar
	} from "../../components/better-calendar/calendar";
	import BetterCalendar from '../../components/better-calendar/index.vue'
	export default {
		components: {
			BetterCalendar
		},
		data() {
			const INIT_DAY_TYPE = "solar";
			const INIT_DAY_TIMESTAMP = dayjs().valueOf();
			const INIT_DAY = dayjs().format("YYYY-MM-DD");
			return {
				dl: '', // 当前代理id
				loginSuccessed: false, // 是否登录成功
				loading: true,
				showAsk: false, // 是否显示困惑输入框
				noScroll: false,
				version: '',
				scrollTop: 0,
				timer: null,
				footerShow: false,
				totalNum: '*',
				userArr: [],
				userList: userList,
				recorderManager: {},
				innerAudioContext: {},
				Animal: '',
				submitBirthday: null,
				formInfo: {
					kunHuo: '', // 困惑
					name: '',
					sex: '',
					birthday: '',
					birthday2: '',
					birthdayText: '',
					needExtraServe: 2, // 1:需要 2:不需要
					needExtraServeType: 0, // 0:不选  1:文字  2:语言
					customContent: '', // 自定义内容
					voice: '', // 语音
					voiceTime: 0, // 语音时长
					wechatNumber: '', // 预留的微信号
				},
				voiceTimer: null,
				audioState: 0,
				playState: false,
				showCalendar: false,
				date: {
					type: INIT_DAY_TYPE, // 类型
					timestamp: INIT_DAY_TIMESTAMP, // 时间戳
					solarDate: INIT_DAY, // 公历日期 - 文本（2000-1-1）
					lunarDate: "", // 农历日期 - 文本（己卯年冬月廿五(2000-1-1)）
					lunarDateNumber: "", // 农历生日的数字写法（1999-12-25）
				},
				lunarTab: true,
			}
		},
		onShow() {
			this.login()
			this.totalNum = ((new Date().getTime() / 100).toFixed(0).toString().slice(3, 9))
			this.getUserList()
			// #ifdef H5
			this.getH5ShowKunhuo()
			// #endif
			// #ifdef MP-ALIPAY || MP-TOUTIAO
			this.getShowAskBtn()
			// #endif
			clearInterval(this.timer)
			this.timer = setInterval(() => {
				this.scrollTop--
				if (this.scrollTop <= -950) {
					this.scrollTop = 0
				}
			}, 50)
		},
		onLoad(options) {
			// #ifdef H5
			const dl = this.getUrlValue('dl')
			this.dl = dl.split('/')[0]
			// #endif
			
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		methods: {
			getUrlValue(value) {
				// 从第一个?开始，且不包括#之后，并截取掉?的部分
				const query = location.search.substring(1);
				// 从#开始的部分，并转换成数组
				const hash = location.hash.split("?");
				// query和hash均没有参数
				if (!query && hash.length < 2) {
					return ''
				}
				// 先取query部分的参数进行匹配
				const vars = query.split("&")
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=")
					if (pair[0] == value) {
						return pair[1]
					}
				}
				// query没有参数，或者有参数但没找到，则取hash部分的参数
				if (!hash[1]) {
					return ''
				}
				vars = hash[1].split("&")
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=")
					if (pair[0] == value) {
						return pair[1]
					}
				}
				return ''
			},
			// 获取h5端是否显示困惑按钮
			async getH5ShowKunhuo() {
				this.showAsk = true
			},
			// 获取是否展示困惑按钮
			async getShowAskBtn() {
				const res = await getShowAsk({
					appid: APPID
				})
				if (res.status === 200) {
					this.showAsk = res.data === 1 ? true : false
				}
			},
			// 监听姓名输入框获取焦点事件
			handleNameFocus() {
				uni.getSystemInfo({
					success: function(info) {
						// 假设你想滚动到距离顶部100px的位置
						let scrollTop = 220;

						// 如果需要根据不同设备进行特定的计算
						// 比如你想让100px在所有设备上看起来都差不多
						// 可以根据设备的windowHeight来缩放
						scrollTop = 220 * info.windowHeight / 500; // 假设600px是你设定的基准高度

						uni.pageScrollTo({
							scrollTop: scrollTop,
							duration: 300 // 动画时长，默认300ms
						});
					}
				});
			},
			toPage,
			dateCancel() {
				this.noScroll = false
				this.showCalendar = false
			},
			dateConfirm(e) {
				// year: 1991          //公历年
				// month: 12           //公历月
				// day: 31             //公历日
				// hour: -1            //时辰，-1未知时辰
				// isLeap: false       //农历是否是闰年
				// lYear: 1991         //农历年
				// lMonth: 11          //农历月
				// lDay: 26            //农历日
				// lastTab: "solar"    //最后选择的是农历（lunar）还是公历（solar）

				// lunarStr: "农历:1991年十一月廿六 时辰未知"
				// solarStr: "公历:1991年12月31日 时辰未知"
				// thisStr: "公历:1991年12月31日 时辰未知"

				this.lunarTab = e.lastTab !== 'solar'
				this.formInfo.birthday = {
					year: e.year,
					month: e.month,
					day: e.day,
				}
				this.formInfo.birthday2 = {
					year: e.lYear,
					month: e.lMonth,
					day: e.lDay,
				}
				this.formInfo.birthdayText = e.thisStr


				//

				this.submitBirthday = {
					yy: Number(e.year),
					mm: Number(e.month),
					dd: Number(e.day),
					hh: e.hour,
					_dd: Number(e.lYear),
					_mm: Number(e.lMonth) * -1,
					_yy: Number(e.lDay)
				}


				let year2 = Number(e.year) % 12;
				let zodiac;
				// 方法二
				switch (year2) {
					case 0:
						zodiac = '猴';
						break;
					case 1:
						zodiac = '鸡';
						break;
					case 2:
						zodiac = '狗';
						break;
					case 3:
						zodiac = '猪';
						break;
					case 4:
						zodiac = '鼠';
						break;
					case 5:
						zodiac = '牛';
						break;
					case 6:
						zodiac = '虎';
						break;
					case 7:
						zodiac = '兔';
						break;
					case 8:
						zodiac = '龙';
						break;
					case 9:
						zodiac = '蛇';
						break;
					case 10:
						zodiac = '马';
						break;
					default:
						zodiac = '羊';
				}

				this.Animal = zodiac
				console.log(this.Animal);
				this.noScroll = false
				this.showCalendar = false
				console.log(e);
			},
			// 支付宝小程序登录逻辑
			alipayLogin() {
				uni.login({
					success: async (loginRes) => {
						const res = await alitaskAuth({
							code: loginRes.code,
						})

						if (res.status === 200) {
							uni.setStorageSync('openid', res.data.id)
							this.$store.state.openid = res.data.id

							const data2 = await getType({
								appid: APPID
							})
							if (data2.status === 200) {
								this.version = data2.data.version
							}
							this.loading = false
							this.loginSuccessed = true
						}
					}
				});
			},
			// 抖音小程序登录逻辑
			dypayLogin() {
				uni.login({
					success: async (loginRes) => {
						// 访问后端接口,传递code appid 拿到想要的信息 比如openid
						const res = await dytaskAuth({
							code: loginRes.code,
						})
						if (res.status === 200) {
							// 缓存一份openid信息
							uni.setStorageSync('openid', res.data.tripartiteCode)
							// 保存openid信息
							this.$store.state.openid = res.data.tripartiteCode
							// 获取版本信息 A版还是B版还是C版
							const data2 = await getType({
								appid: APPID
							})
							// 保存版本信息 进而显示不同的页面
							if (data2.status === 200) {
								this.version = data2.data.version
							}
							this.loading = false
							this.loginSuccessed = true
						}
					}
				});
			},
			// h5端登录逻辑
			h5Login() {
				this.loginSuccessed = true
			},
			// 登录逻辑
			async login() {
				// #ifdef MP-TOUTIAO
				this.dypayLogin()
				// #endif
				// #ifdef MP-ALIPAY
				this.alipayLogin()
				// #endif
				// #ifdef H5
				this.h5Login()
				// #endif

			},
			// 打开日期选择器
			openBetterCalendar() {

				this.noScroll = true;
				// 显示日期组件
				this.showCalendar = true;

				this.$nextTick(() => {
					if (this.submitBirthday) {
						setTimeout(() => {
							this.$refs['ruiDatepicker'].init({
								confirm: true, //是否需要确认
								date: `${this.submitBirthday.yy}-${Number(this.submitBirthday.mm)<10?('0' +this.submitBirthday.mm) :this.submitBirthday.mm}-${Number(this.submitBirthday.dd)<10?('0' +this.submitBirthday.dd) :this.submitBirthday.dd}`, //默认日期(新历)
								hour: this.submitBirthday.hh, //默认时辰,未知
								showHour: true, //是否有时辰选项
								lunar: this.lunarTab, //默认展示农历
							})
						}, 200)
					} else {
						setTimeout(() => {
							this.$refs['ruiDatepicker'].init({
								confirm: true, //是否需要确认
								date: '1984-07-06', //默认日期(新历)
								hour: '-1', //默认时辰,未知
								showHour: true, //是否有时辰选项
								lunar: this.lunarTab, //默认展示农历
							})
						}, 200)
					}
				})
				// this.noScroll = true
				// this.showCalendar = true;
				// this.$refs.timeInfo.close()

			},
			// 验证中文名字
			checkName(str, type = 1) {
				let reg
				if (type == 1) {
					reg = /^[\u4e00-\u9fa5]{2,6}$/;
				} else {
					reg = /^[\u4e00-\u9fa5]{2,6}$/;
				}
				if (reg.test(str)) {
					return true
				} else {
					return false
				}
			},
			// 验证是否成年
			checkBirthday(yy) {
				var year = new Date().getFullYear()
				if (year - yy < 18) {
					return false
				} else {
					return true
				}
			},
			whereInput() {
				if (!this.checkName(this.formInfo.name)) {
					this.formInfo.name = "";
					toast('请输入2~6个字的中文名字~', )
				}
			},

			checkForm(birthday2, username, sex) {

				//Ming Fix end

				var y = birthday2.yy;
				var m = birthday2.mm;
				var d = birthday2.dd * 1;

				var ys = y;
				var ms = m;
				var ds = d;

				var h = birthday2.hh * 1;

				var i = 0
				m = m - 1;
				d = d - 1;
				var sTermInfo = new Array(0, 21198, 42461, 63813, 85308, 106961, 128806, 150834, 173055, 195433, 217965,
					240558, 263215, 285853, 308440, 330912, 353245, 375400, 397371, 419149, 440750, 462193, 483513,
					504747);

				function wzc(year, num) {
					var objD = new Date((31556956000 * (year - 1882) + sTermInfo[num] * 60000) + Date.UTC(1882, 0, 5, 18,
						0));
					var hh = objD.getUTCHours();
					var mm = objD.getUTCMinutes();
					var ss = objD.getUTCSeconds();
					var s = num + '/(' + (objD.getUTCMonth() + 1) + "月" + objD.getUTCDate() + "日" + hh + ":" + mm + ')';
					return (s);
				}

				function sTerm_d(y, n) {
					var offDate = new Date((31556956000 * (y - 1882) + sTermInfo[n] * 60000) + Date.UTC(1882, 0, 5, 18,
						0));
					return (offDate.getUTCDate());
				}

				function sTerm_hi(y, n) {
					var offDate = new Date((31556956000 * (y - 1882) + sTermInfo[n] * 60000) + Date.UTC(1882, 0, 5, 18,
						0));
					var hi = offDate.getUTCHours() * 60 + offDate.getUTCMinutes();
					return (hi);
				}

				function sTerm_s(y, n) {
					var offDate = new Date((31556956000 * (y - 1882) + sTermInfo[n] * 60000) + Date.UTC(1882, 0, 5, 18,
						0));
					return (offDate);
				}

				var cY, cM, cD, cH;
				if (m < 2) cY = y - 1900 + 36 - 1;
				else cY = y - 1900 + 36;
				var term2 = sTerm_d(y, 2);
				if (m == 1 && (d + 1) > term2) cY = y - 1900 + 36;
				if (m == 1 && (d + 1) == term2 && (h * 60 + i) >= sTerm_hi(y, 2)) cY = y - 1900 + 36;
				var firstNode = sTerm_d(y, m * 2);
				cM = (y - 1900) * 12 + m + 12;
				var start_term = (Date.UTC(y, m, d + 1, h, i, 0, 0) - sTerm_s(y, m * 2 - 2)) / 1000;
				var start_term1 = wzc(y, m * 2 - 2);
				if (m == 0) {
					start_term = (Date.UTC(y, m, d + 1, h, i, 0, 0) - sTerm_s(y - 1, 22)) / 1000;
					start_term1 = wzc(y - 1, 22);
				}
				var end_term = (sTerm_s(y, m * 2) - Date.UTC(y, m, d + 1, h, i, 0)) / 1000;
				var end_term1 = wzc(y, m * 2);

				if ((d + 1) > firstNode || ((d + 1) == firstNode && (h * 60 + i * 1) >= sTerm_hi(y, m * 2))) {
					cM = (y - 1900) * 12 + m + 13;
					start_term = (Date.UTC(y, m, d + 1, h, i, 0, 0) - sTerm_s(y, m * 2)) / 1000;
					start_term1 = wzc(y, m * 2);
					end_term = (sTerm_s(y, m * 2 + 2) - Date.UTC(y, m, d + 1, h, i, 0)) / 1000;
					end_term1 = wzc(y, m * 2 + 2);
					if (m == 11) {
						end_term = (sTerm_s(y + 1, 0) - Date.UTC(y, m, d + 1, h, i, 0, 0)) / 1000;
						end_term1 = wzc(y + 1, 0);
					}
				}

				if (start_term < 0) start_term = 0;
				if (end_term < 0) end_term = 0;
				var dayCyclical = Date.UTC(y, m, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10;
				cD = dayCyclical + d;
				if (h >= 23) cD = dayCyclical + d + 1;
				var nh;
				if (h == 23 || h == 1 || h == 3 || h == 5 || h == 7 || h == 9 || h == 11 || h == 13 || h == 15 || h ==
					17 || h == 19 || h == 21) {
					nh = h - 1;
					nh = nh + 2;
				} else {
					nh = h;
				}
				var houseCyclical = (Date.UTC(y, m, d + 1, nh, 0, 0, 0) / 3600000 + 25567 * 24) / 2;
				cH = houseCyclical;
				var lunarInfo = new Array(
					0x4bd8, 0x4ae0, 0xa570, 0x54d5, 0xd260, 0xd950, 0x5554, 0x56af, 0x9ad0, 0x55d2, 0x4ae0, 0xa5b6,
					0xa4d0, 0xd250, 0xd295, 0xb54f, 0xd6a0, 0xada2, 0x95b0, 0x4977, 0x497f, 0xa4b0, 0xb4b5, 0x6a50,
					0x6d40, 0xab54, 0x2b6f, 0x9570, 0x52f2, 0x4970, 0x6566, 0xd4a0, 0xea50, 0x6a95, 0x5adf, 0x2b60,
					0x86e3, 0x92ef, 0xc8d7, 0xc95f, 0xd4a0, 0xd8a6, 0xb55f, 0x56a0, 0xa5b4, 0x25df, 0x92d0, 0xd2b2,
					0xa950, 0xb557, 0x6ca0, 0xb550, 0x5355, 0x4daf, 0xa5b0, 0x4573, 0x52bf, 0xa9a8, 0xe950, 0x6aa0,
					0xaea6, 0xab50, 0x4b60, 0xaae4, 0xa570, 0x5260, 0xf263, 0xd950, 0x5b57, 0x56a0, 0x96d0, 0x4dd5,
					0x4ad0, 0xa4d0, 0xd4d4, 0xd250, 0xd558, 0xb540, 0xb6a0, 0x95a6, 0x95bf, 0x49b0, 0xa974, 0xa4b0,
					0xb27a, 0x6a50, 0x6d40, 0xaf46, 0xab60, 0x9570, 0x4af5, 0x4970, 0x64b0, 0x74a3, 0xea50, 0x6b58,
					0x5ac0, 0xab60, 0x96d5, 0x92e0, 0xc960, 0xd954, 0xd4a0, 0xda50, 0x7552, 0x56a0, 0xabb7, 0x25d0,
					0x92d0, 0xcab5, 0xa950, 0xb4a0, 0xbaa4, 0xad50, 0x55d9, 0x4ba0, 0xa5b0, 0x5176, 0x52bf, 0xa930,
					0x7954, 0x6aa0, 0xad50, 0x5b52, 0x4b60, 0xa6e6, 0xa4e0, 0xd260, 0xea65, 0xd530, 0x5aa0, 0x76a3,
					0x96d0, 0x4afb, 0x4ad0, 0xa4d0, 0xd0b6, 0xd25f, 0xd520, 0xdd45, 0xb5a0, 0x56d0, 0x55b2, 0x49b0,
					0xa577, 0xa4b0, 0xaa50, 0xb255, 0x6d2f, 0xada0, 0x4b63, 0x937f, 0x49f8, 0x4970, 0x64b0, 0x68a6,
					0xea5f, 0x6b20, 0xa6c4, 0xaaef, 0x92e0, 0xd2e3, 0xc960, 0xd557, 0xd4a0, 0xda50, 0x5d55, 0x56a0,
					0xa6d0, 0x55d4, 0x52d0, 0xa9b8, 0xa950, 0xb4a0, 0xb6a6, 0xad50, 0x55a0, 0xaba4, 0xa5b0, 0x52b0,
					0xb273, 0x6930, 0x7337, 0x6aa0, 0xad50, 0x4b55, 0x4b6f, 0xa570, 0x54e4, 0xd260, 0xe968, 0xd520,
					0xdaa0, 0x6aa6, 0x56df, 0x4ae0, 0xa9d4, 0xa4d0, 0xd150, 0xf252, 0xd520);
				var nStr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
				var nStr2 = new Array('初', '十', '廿', '卅');
				var monthName = new Array("", "正", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二");

				function lYearDays(y) {
					var i, sum = 348;
					for (i = 0x8000; i > 0x8; i >>= 1) sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
					return (sum + leapDays(y));
				}

				function leapDays(y) {
					if (leapMonth(y)) return ((lunarInfo[y - 1899] & 0xf) == 0xf ? 30 : 29);
					else return (0);
				}

				function leapMonth(y) {
					var lm = lunarInfo[y - 1900] & 0xf;
					return (lm == 0xf ? 0 : lm);
				}

				function monthDays(y, m) {
					return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
				}


				function Lunar(objDate, hh) {
					var i, leap = 0,
						temp = 0;
					var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900,
						0, 31)) / 86400000;
					if (objDate.getHours() >= 24) {
						offset++;
					}
					if (hh === -1) {
						offset++;
					}
					for (i = 1900; i < 2100 && offset > 0; i++) {
						temp = lYearDays(i);
						offset -= temp;
					}
					if (offset < 0) {
						offset += temp;
						i--;
					}
					this.year = i;
					leap = leapMonth(i);
					this.isLeap = false;
					for (i = 1; i < 13 && offset > 0; i++) {
						if (leap > 0 && i == (leap + 1) && this.isLeap == false) {
							--i;
							this.isLeap = true;
							temp = leapDays(this.year);
						} else {
							temp = monthDays(this.year, i);
						}
						if (this.isLeap == true && i == (leap + 1)) this.isLeap = false;
						offset -= temp;
					}
					if (offset == 0 && leap > 0 && i == leap + 1)
						if (this.isLeap) {
							this.isLeap = false;
						} else {
							this.isLeap = true;
							--i;
						}
					if (offset < 0) {
						offset += temp;
						--i;
					}
					this.month = i;
					this.day = offset + 1;
				}


				function cYear(y) {
					var s;
					s = nStr1[Math.floor(y / 1000)];
					s += nStr1[Math.floor((y % 1000) / 100)];
					s += nStr1[Math.floor((y % 100) / 10)];
					s += nStr1[y % 10];
					return (s);
				}

				function cDay(d) {
					var s;
					switch (d) {
						case 10:
							s = '初十';
							break;
						case 20:
							s = '二十';
							break;
							break;
						case 30:
							s = '三十';
							break;
							break;
						default:
							s = nStr2[Math.floor(d / 10)];
							s += nStr1[d % 10];
					}
					return (s);
				}

				function lll(y, m, i, h) {
					var hh = ["00:00-00:59早子", "01:00-01:59丑", "02:00-02:59丑", "03:00-03:59寅", "04:00-04:59寅",
						"05:00-05:59卯", "06:00-06:59卯", "07:00-07:59辰", "08:00-08:59辰", "09:00-09:59巳", "10:00-10:59巳",
						"11:00-11:59午", "12:00-12:59午", "13:00-13:59未", "14:00-14:59未", "15:00-15:59申", "16:00-16:59申",
						"17:00-17:59酉", "18:00-18:59酉", "19:00-19:59戌", "20:00-20:59戌", "21:00-21:59亥", "22:00-22:59亥",
						"23:00-23:59晚子"
					];
					var sDObj = new Date(y, m, i + 1, h);
					var lDObj = new Lunar(sDObj, h);
					var lY = cYear(lDObj.year);
					var lM = monthName[lDObj.month];
					var lD = cDay(lDObj.day);
					var lL = lDObj.isLeap ? '闰' : '';
					if (h >= 0 && h < 24) {
						var lS = hh[h];
					} else {
						var lS = '未知';
					}
					var lH = lDObj.isLeap ? '闰' : '';

					return (lY + '年' + lL + lM + '月' + lD + '日' + ' ' + lS + '时')
				}

				var lDate = lll(y, m, d, h);


				var _obj = {}
				_obj.username = username
				_obj.gender = sex
				_obj.y = ys;
				_obj.m = ms;
				_obj.d = ds;
				_obj.h = h;
				_obj.i = 0;
				_obj.cY = cY;
				_obj.cM = cM;
				_obj.cD = cD;
				_obj.cH = cH;
				_obj.term1 = wzc(y, m * 2);
				_obj.term2 = wzc(y, m * 2 + 1);
				_obj.start_term = start_term;
				_obj.end_term = end_term;
				_obj.start_term1 = start_term1;
				_obj.end_term1 = end_term1;
				_obj.lDate = lDate;

				return _obj

			},

			async toProp() {

				if (!this.formInfo.name) return toast('请输入姓名')
				if (this.formInfo.sex === 0 || this.formInfo.sex === 1) {
					console.log(this.formInfo.sex)
				} else {
					return toast('请选择性别')
				}
				// if (this.formInfo.sex !== 0 || this.formInfo.sex !== 1) return toast('请选择性别')
				if (!this.formInfo.birthday) return toast('请选择生日')
				if (this.showAsk) {
					if (!this.formInfo.kunHuo) return toast('请输入您的现状和困惑')
				}
				if (this.showAsk) {
					if (this.formInfo.kunHuo.length >= 1000) return toast('您输入的内容过长，请修改')
				}
				uni.showLoading({
					title: '加载中'
				})
				let _dataOther = {
					birthdayJson: JSON.stringify(this.submitBirthday),
					needExtraServe: this.formInfo.needExtraServe,
					needExtraServeType: this.formInfo.needExtraServeType,
					customContent: this.formInfo.customContent,
					voice: this.formInfo.voice,
					voiceTime: this.formInfo.voiceTime,
					wechatNumber: '',
					kunHuo: this.formInfo.kunHuo,
					dl: Number(this.dl),

				}
				let _data = this.checkForm(this.submitBirthday, this.formInfo.name, this.formInfo.sex)

				// #ifdef MP-ALIPAY || MP-TOUTIAO
				const res = await submitInfo({
					..._data,
					..._dataOther
				})
				// #endif
				// #ifdef H5
				let res = await submitInfoH5({
					..._data,
					..._dataOther
				})
				// #endif
				uni.hideLoading()
				if (res.code === 200) {
					// #ifdef H5
					this.addOrderToLocalStorage(res.oid)
					// #endif
					toPage('/pages/prop/prop?birthday=' + JSON.stringify(this.submitBirthday) + '&username=' + this
						.formInfo.name + '&gender=' + this.formInfo.sex + '&zodiac=' + this.Animal + '&oid=' + res
						.oid)
				} else {
					toast(res.msg)
				}
			},
			// 添加订单号到缓存中
			addOrderToLocalStorage(oid) {
				let orderIds = uni.getStorageSync('orderIds') ? JSON.parse(uni.getStorageSync('orderIds')) : []

				orderIds.push(oid)

				uni.setStorageSync('orderIds', JSON.stringify(orderIds))
			},
			getUserList() {
				for (let i = 0; i < 10; i++) {
					let num = Math.floor(Math.random() * 60) + 1; //范围是[1~70]
					this.userList[num].timer = Math.floor(Math.random() * 10) + 1
					this.userList[num].fenshu = Math.floor(Math.random() * 10) + 90
					this.userArr.push(this.userList[num])
				}
			},
			copy() {

				confirm('温馨提示', '客服QQ号：1312507423 已复制，请前去咨询。', () => {
					uni.setClipboardData({
						data: '1312507423',
						success: function() {
							console.log('success');
						}
					});
				}, '确定', false)
			},


			onPageScroll(e) {
				if (e.scrollTop > 500) {
					this.footerShow = true
				} else {
					this.footerShow = false
				}
			},
			toTop() {
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 400 // string 选择器
				});
			},

		},
		watch: {
			'formInfo.needExtraServe'() {
				if (this.formInfo.needExtraServe === 2) {
					this.formInfo.needExtraServeType = 0
					this.formInfo.customContent = ''
					this.formInfo.voice = ''
					this.formInfo.voiceTime = 0
					this.formInfo.wechatNumber = ''
					this.audioState = 0
					this.playState = false
					//  执行方法 停止录音
					//  执行方法 播放
				}
			},
			'formInfo.needExtraServeType'() {
				this.formInfo.customContent = ''
				this.formInfo.voice = ''
				this.formInfo.voiceTime = 0
				this.formInfo.wechatNumber = ''
				this.audioState = 0
				this.playState = false
				//  执行方法 停止录音
				//  执行方法 播放
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages-index {
		width: 750rpx;
		overflow-x: hidden;

		&.active {
			overflow: hidden;
		}

		.top-tips {
			color: #fff;
			overflow: hidden;
			background: rgba(22, 61, 100, .54);
			position: fixed;
			white-space: nowrap;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
			width: 750rpx;
			box-sizing: border-box;

			.top-tips-text {
				white-space: nowrap;
				display: block;
				word-wrap: normal;
				width: max-content;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 22rpx;
				transform: translateX(500rpx);
				animation: marquee2 18s infinite linear;
			}
		}

		.top {
			width: 750rpx;
			height: 934rpx;
			overflow: hidden;
			position: relative;

			.topBg {
				width: 750rpx;
				height: 934rpx;
			}

			.round {
				width: 620rpx;
				height: 620rpx;
				position: absolute;
				top: 280rpx;
				left: 65rpx;
				z-index: 50;
				animation: rotate 4s linear infinite;
			}

			.icon1 {
				width: 71rpx;
				height: 260rpx;
				position: absolute;
				top: 380rpx;
				left: 560rpx;
				z-index: 51;
				animation: play1 7s linear infinite;
			}

			.icon2 {
				width: 71rpx;
				height: 266rpx;
				position: absolute;
				top: 390rpx;
				left: 60rpx;
				z-index: 51;
				animation: play2 7s linear infinite;
			}

			.icon3 {
				width: 71rpx;
				height: 258rpx;
				position: absolute;
				top: 310rpx;
				left: 260rpx;
				z-index: 51;
				animation: play1 7s linear infinite;
			}
		}

		.birth {
			width: 750rpx;
			height: 1220rpx;
			margin-top: -280rpx;
			position: relative;
			color: #26639d;
			font-size: 28rpx;

			&.active {
				height: 1321rpx;
			}

			.bg {
				width: 750rpx;
				position: absolute;
				top: 0;
				left: 0;

				&.bg1 {
					height: 1521rpx;
					z-index: 53;
				}

				&.bg2 {
					height: 1020rpx;
				}
			}

			.swiper-box {
				position: absolute;
				top: 220rpx;
				left: 0;

				z-index: 59;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.swiper {
					width: 480rpx;
					height: 100rpx;
					color: #81b3ff;
					padding: 0 10rpx;
					box-sizing: border-box;

					.img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50rpx;
						margin-right: 20rpx;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 40rpx;
						}
					}
				}

			}

			.total-num {
				flex: 1;
				color: #81b3ff;
				font-size: 26rpx;
				padding-left: 20rpx;
				border-left: 2rpx solid #81b3ff;
			}

			.form-name {
				position: absolute;
				left: 200rpx;
				top: 445rpx;
				width: 400rpx;
				height: 80rpx;
				z-index: 59;

				input {
					display: block;
					width: 500rpx;
					height: 80rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					font-size: 28rpx;
				}
			}

			.form-sex {
				position: absolute;
				left: 200rpx;
				top: 542rpx;
				width: 400rpx;
				height: 80rpx;
				z-index: 59;

				.sex-item {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 56rpx;
					width: 146rpx;
					box-sizing: border-box;
					text-align: center;
					line-height: 56rpx;
					border-radius: 28rpx;
					color: #fff;
					background: #b2c6dc;

					&.active {
						background: #ff9d33;
					}

					image {
						width: 30rpx;
						margin-right: 15rpx;
					}
				}

			}

			.form-birthday {
				position: absolute;
				left: 200rpx;
				top: 642rpx;
				width: 400rpx;
				height: 80rpx;
				z-index: 59;

				input {
					display: block;
					width: 500rpx;
					height: 80rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					font-size: 28rpx;
				}
			}

			.form-ask {
				position: absolute;
				left: 70rpx;
				top: 820rpx;
				width: 600rpx;
				z-index: 59;

				textarea {
					display: block;
					width: 100%;
					height: 200rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					padding: 10rpx;
				}
			}

			.needJh {
				position: absolute;
				top: 720rpx;
				left: 0;
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.title {


					font-size: 30rpx;
					margin-right: 40rpx;
				}

				.chooseSlider {
					width: 280rpx;
					height: 40rpx;
					border-radius: 30rpx;
					background: #b2c6dc;
					position: relative;

					view {
						position: absolute;
						left: 0;
						top: -10rpx;
						width: 180rpx;
						height: 60rpx;
						border-radius: 30rpx;
						border: 4rpx solid #fff;
						transition: .3s linear all;
						box-sizing: border-box;

						&.active {
							left: 100rpx;

							text {
								color: #fff;
								border: 10rpx solid #163d64;
								background: #163d64;
							}
						}

						text {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 100%;
							height: 100%;
							background: #b2c6dc;
							border-radius: 30rpx;
							border: 10rpx solid #97b4d4;
							color: #fff;
							box-sizing: border-box;
						}
					}
				}
			}

			.title-btn {
				position: absolute;
				top: 860rpx;
				left: 50%;
				transform: translate(-50%, 0);
				display: block;
				width: 320rpx;
				height: 45rpx;
			}

			.desc-btn-list {
				position: absolute;
				top: 940rpx;
				left: 60rpx;
				right: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.desc-btn {
					display: block;
					width: 314rpx;
					height: 136rpx;
				}
			}

			.desc-text {
				display: block;
				position: absolute;
				top: 820rpx;
				left: 50rpx;
				right: 50rpx;

				.desc-title {
					font-size: 21rpx;
					line-height: 150%;
					color: #65768b;
					text-align: center;
					margin-bottom: 20rpx;
				}

				.text-info {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					flex-direction: column;
					width: 100%;
					height: 250rpx;
					padding: 20rpx;
					border-radius: 20rpx;
					background: #fff;
					box-sizing: border-box;

					.back-btn {
						display: block;
						width: 64rpx;
						height: 41rpx;
					}

					textarea {
						display: block;
						width: 100%;
						height: 160rpx;
						border: 0;
						font-size: 26rpx;
						line-height: 150%;
						color: #26639d;
						box-sizing: border-box;
					}
				}
			}

			.desc-audio {
				display: block;
				position: absolute;
				top: 820rpx;
				left: 50rpx;
				right: 50rpx;

				.desc-title {
					font-size: 21rpx;
					line-height: 150%;
					color: #65768b;
					text-align: center;
					margin-bottom: 20rpx;
				}

				.text-info {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					flex-direction: column;
					width: 100%;
					height: 250rpx;
					padding: 20rpx;
					border-radius: 20rpx;
					background: #fff;
					box-sizing: border-box;

					.back-btn {
						display: block;
						width: 64rpx;
						height: 41rpx;
					}

					.play-audio {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 15rpx 20rpx;
						background: #26639d;
						border-radius: 10rpx;

						.audio-play {
							width: 35rpx;
							height: 35rpx;
							display: block;
							margin-right: 20rpx;
						}

						.audio-gif {
							width: 120rpx;
							height: 35rpx;
							display: block;
							margin-right: 20rpx;
						}

						.audio-png {
							width: 120rpx;
							height: 35rpx;
							display: block;
							margin-right: 20rpx;
						}

						text {
							font-size: 26rpx;
							line-height: 35rpx;
							color: #fff;
						}
					}

					.star-box {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-around;
						flex-direction: column;

						image {
							display: block;
							width: 100rpx;
							height: 100rpx;
							margin: 0 auto 30rpx;
						}

						view {
							font-size: 26rpx;
							line-height: 35rpx;
						}
					}

					.ing-box {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-around;
						flex-direction: column;

						image {

							display: block;
							width: 205rpx;
							height: 90rpx;
							margin: 0 auto 30rpx;
						}

						view {
							font-size: 26rpx;
							line-height: 35rpx;
						}
					}

					.end-box {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-around;
						flex-direction: column;

						image {
							display: block;
							width: 50rpx;
							height: 50rpx;
							margin: 0 auto 10rpx;
						}

						view {
							font-size: 26rpx;
							line-height: 35rpx;
						}
					}
				}
			}


			.tips {
				position: absolute;
				bottom: 80rpx;
				left: 80rpx;
				right: 80rpx;
				line-height: 140%;
				font-size: 21rpx;
				text-align: justify;
				color: rgb(122, 148, 173);
				z-index: 55;
			}

		}

		.btn {
			width: 750rpx;
			margin: 20rpx 0;

			.indexBtn {
				width: 673rpx;
				height: 114rpx;
				margin-left: 39rpx;
				animation: big 2s linear infinite;
			}
		}

		.desc {
			.desc-img {
				width: 750rpx;
			}

			.m-box {
				position: relative;
				width: 700rpx;
				margin: 50rpx auto 0;
				border-radius: 6rpx;
				padding: 85rpx 10rpx 20rpx;
				background: url(https://ydh5res.onlineweixin.com/cy/index_files/gundong.png?v=20201205132101458) no-repeat;
				background-size: 100% 100%;

				.m-box__title {
					color: #fff8e6;
					text-align: center;
					width: 100%;
					height: 70rpx;
					line-height: 70rpx;
					background: url(https://ydh5res.onlineweixin.com/cy/index_files/gd-title.png?v=20201205101321458) no-repeat top center;

					background-size: auto 70rpx;
					font-size: 36rpx;
					position: absolute;
					left: 50%;
					top: -12rpx;
					transform: translateX(-50%);
					font-weight: 700
				}

				.user_feedback {
					height: 460rpx;
					overflow: hidden;

					margin: 0 20rpx;

					.uf_ul {
						position: relative;
						top: 0;

						.li {
							overflow: hidden;
							border-bottom: 2rpx dashed #4d577d;
							padding: 30rpx 0;
							font-size: 30rpx;

							text {
								display: inline-block;
								color: #0066ff;
								font-weight: 700
							}
						}
					}
				}
			}
		}

		.scrollBtn {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(172, 188, 210, 0.6);
			width: 750rpx;
			height: 140rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			image {
				width: 673rpx;
				height: 114rpx;

				animation: big 2s linear infinite;
			}
		}

		.public_footer_help {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 30rpx;
			color: #fff;

		}
	}

	.right-btn {
		position: fixed;
		right: 0;
		top: 10vh;
		background: rgba(0, 0, 0, .5);
		padding: 10rpx;
		border-radius: 10rpx 0 0 10rpx;
		z-index: 999;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		view {
			width: 40rpx;
			color: #fff;
			text-align: center;
			font-size: 28rpx;
		}
	}

	.time-info {
		background: #fff;

		.time-info-title {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 100rpx;
			border-bottom: 2rpx solid #eee;
			font-size: 32rpx;
		}

		.time-info-box {
			padding: 40rpx 20rpx;

			.time-info-tips {
				text-align: center;
				line-height: 150%;
				color: #e4393c;
				font-size: 30rpx;
				padding: 10rpx 0;
			}

			.time-num {
				text-align: center;
				line-height: 150%;
				font-size: 30rpx;
				padding: 10rpx 0;

				text {
					color: #e4393c;
				}
			}
		}

		.footer-btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 100rpx;

			view {
				display: flex;
				align-items: center;
				justify-content: space-around;
				height: 100rpx;
				width: 50%;
				font-size: 32rpx;

				&.active {
					background: #e4393c;
					color: #fff;
				}
			}
		}
	}
</style>